import React, { Component } from 'react';
import { Card } from 'antd';
import CategorySelector from './category-selector';
import RichEditor from '../../../util/rich-editer';
import Mutil from '../../../util/mm.js';
import Product from '../../../server/product-server.js';
import './save.less';


const _mm = new Mutil();
const _product = new Product();
class ProductDetail extends Component{
	constructor(props){
		super(props);
		this.state={
			id               : this.props.match.params.pid,
			name             : '',
			subtitle         : '',
			categoryId       : 0,
			parentCategoryId : 0,
			subImages        : [],
			price            : '',
			stock            : '',
			detail           : '', 
			status           : 1 //商品状态1在售
		}
	}
	componentDidMount(){
		this.loadProuct();
	}
	loadProuct(){
		//有id的时候，表示是编辑功能，需要表单回填
		if(this.state.id){
			_product.getProduct(this.state.id).then((res) => {
				let images= res.subImages.split(',');
				res.subImages = images.map((imgUri) => {
					return {
						uri : imgUri,
						url : res.imageHost + imgUri 
					}
				});
				this.setState(res);
			}, (errMsg) => {
				_mm.errorTips(errMsg);
			})
		}
	}
	
	render(){
		return(
				<Card title="商品详情">
					<div className="form-horizontal">
					  <div className="form-group">
					    <label className="col-md-2 control-label">商品名称</label>
					    <div className="col-md-6">
					      <p className="form-control-static">{this.state.name}</p>
					    </div>
					  </div>
					  <div className="form-group">
					    <label className="col-md-2 control-label">商品描述</label>
					    <div className="col-md-6">
					      <p className="form-control-static">{this.state.subtitle}</p>
					    </div>
					  </div>
					  <div className="form-group">
					    <label className="col-md-2 control-label">等级描述</label>
					    <CategorySelector 
					    	readOnly
					    	categoryId={this.state.categoryId}
					    	parentCategoryId={this.state.parentCategoryId} />
					  </div>
					  
					  <div className="form-group">
					    <label className="col-md-2 control-label">商品价格</label>
					    <div className="col-md-4">
					      	<div class="input-group">
						      <input 
						      	readOnly
						      	value={this.state.price}
						      	class="form-control" 
						      	/>
						      <span class="input-group-btn">
						        <button class="btn btn-default" type="button">元</button>
						      </span>
						    </div>
					    </div>
					  </div>
					  <div className="form-group">
					    <label className="col-md-2 control-label">商品库存</label>
					    <div className="col-md-4">
					      <div class="input-group">
						      <input 
						      	readOnly
						      	className="form-control" 
						      	value={this.state.stock}
						      	
						      	/>
						      <span class="input-group-btn">
						        <button class="btn btn-default" type="button">件</button>
						      </span>
						    </div>
					    </div>
					  </div>
					  <div className="form-group">
					    <label className="col-md-2 control-label">商品图片</label>
					    <div className="col-md-10" style={{overflow: 'hidden'}}>
					    	{
					    		this.state.subImages.length ? this.state.subImages.map(
					    			(image, index)=>
					    			(
					    					<div className="img-con" key={index} >
					    						<img className="img" src={image.url} />
					    					</div>
					    			)) 
					    			: 
					    			(<div>暂无图片</div>)
					    	}
					    </div>
					  </div>  
					  <div className="form-group">
						    <label className="col-md-2 control-label">商品详情</label>
						    <div className="col-sm-6" 
						    	dangerouslySetInnerHTML={{__html: this.state.detail}}>
						  	</div>
						</div>
				</div></Card>

		);
	}
}

export default ProductDetail;